<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
export default {
    name: '',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
        },
        dataTime: {
            type: Array,
            default() {
                return {};
            },
        },
        title: {
            type: Array,
            default() {
                return {};
            },
        },
        orgData: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data: () => ({}),
    mounted() {
        setTimeout( () => {
            this.drawChart();
        }, 1000)
    },
    watch: {
        data () {
            this.drawChart();
        }
    },
    methods: {
        drawChart() {
            const {myChart} = this.$refs;
            if (myChart) {
                const thisChart = this.$echarts.init(myChart);
                const option = {
                    grid: {
                        top: '30%',
                        left: this.data.position[1],
                        right: this.data.position[2],
                        bottom: '22%'
                    },
                    tooltip: {
                        show : true,
                        //symbol: "none", //去掉圆点
                        trigger: 'axis',
                        backgroundColor: "rgba(255,255,255,0.85)", //设置背景图片 rgba格式
                        color: "black",
                        borderWidth: "1", //边框宽度设置1
                        borderColor: "gray", //设置边框颜色
                        textStyle: {
                            color: "black" //设置文字颜色
                        },
                    },
                    color:['#00e5e3','#eba962'],
                    legend: {
                        data: ['用户注册趋势', "", '企业认证趋势'],
                        icon: "rect", //改变icon的形状(长方形)
                        itemHeight: 10, //改变圆圈大小
                        itemWidth: 20, //改变圆圈大小
                        right: 30,//legend距离canvas右边的距离
                        top: 0,//legend距离canvas上面的距离
                        textStyle: {
                            fontSize: 12,
                            color: '#4EB2F2',
                            rich:{
                                a:{
                                    fontSize:14,
                                    verticalAlign:'middle',
                                    align:'center',
                                    padding:[-40,20,80,0],
                                },
                                b:{
                                    fontSize:14,
                                    align:'center',
                                    padding:[-20,20,80,0],
                                    lineHeight:25
                                }
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0, //显示所有X轴信息
                            rotate: 40, //x轴文字倾斜角度
                            color: '#069DFD',
                        },
                        // data: this.data?.lineX,  //全部写死1-12月
                        data: this.dataTime
                        // data: ['2021-01','2021-02','2021-03','2021-04','2021-05','2021-06','2021-07','2021-08','2021-09','2021-10','2021-11','2021-12'],  //全部写死1-12月
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        boundaryGap: [0, '85%'],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#069DFD',
                                width: 0.1,
                            },
                        },
                        axisLabel: {
                            color: '#069DFD',
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#069DFD',
                                width: 0.1,
                            },
                        },
                    },
                    series: [{
                        data: this.data?.lineY,
                        connectNulls: true, //可以为没有数据的未连接字段，自动连接
                        type: 'line',
                        name: '用户注册趋势',
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,189,217,0.4)'
                            }, {
                                offset: 1,
                                color: 'rgba(8,16,58,0.5)'
                            }])
                        },
                        lineStyle: {
                            color: '#00FFFF',
                        },
                    },{
                        data: this.orgData?.lineY,
                        connectNulls: true, //可以为没有数据的未连接字段，自动连接
                        name: '企业认证趋势',
                        type: 'line',
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,189,217,0.4)'
                            }, {
                                offset: 1,
                                color: 'rgba(8,16,58,0.5)'
                            }])
                        },
                        lineStyle: {
                            color: '#eba962',
                        },
                    },
                    ],
                };
                thisChart.setOption(option);
                window.addEventListener('resize', () => {
                    thisChart.resize();
                })
            }
        },
    },
};
</script>
<style lang="less" scoped>

</style>
